<template>
  <div style="display: flex;justify-content: start">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>人员成分</span>
        </div>
      </template>
      <e-charts :option="genderOption" style="height: 300px;width: 500px"></e-charts>
    </el-card>
    <el-card>
      注册趋势
      <e-charts :option="option1" style="height: 200px;width: 300px"></e-charts>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {getUserCompositionStatistic} from "@/api/home/user";

let genderOption = reactive({
  title: {
    text: '性别分布',
    left: 'center',
    top: 'center'
  },
  series: []
})
let option1 = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
};

function getUserCompositionStatisticData() {
  getUserCompositionStatistic().then(res => {
    genderOption.series.push({
      type: 'pie',
      data: res.data.genderData,
      radius: ['50%', '80%'],
      itemStyle: {
        normal: {
          label: {
            show: true,
            formatter: '{b} : {c}人 ({d}%)'
          },
          labelLine: {show: true}
        }
      }
    })
  })
}

onMounted(() => {
  getUserCompositionStatisticData()
})
</script>

<style scoped>

</style>
